<template>
  <div class="setting-wrapper">
    <div class="setting-header">
      <span class="back" @click="back"><i class="el-icon-arrow-left">返回</i></span>
      人员设置
    </div>
    <div class="setting-data">
      <div class="data-wrapper">
        <div class="data-header">成员管理</div>
        <div class="row-1">
          <span class="type">管理员：</span>
          <span class="people" v-for="(item, idx) in authData[0].people" :key="item.id">{{item.name}}<span class="btn" @click="delAuth(authData[0], idx)"><i class="el-icon-close"></i></span></span>
          <span class="add-btn" @click="selectAuthPeople(authData[0])"><i class="el-icon-circle-plus-outline"></i></span>
        </div>
        <div class="row-1" style="background: #F3F3F3;">
          <span class="type">观察者：</span>
          <span class="people" v-for="(item, idx) in authData[1].people" :key="item.id">{{item.name}}<span class="btn" @click="delAuth(authData[1], idx)"><i class="el-icon-close"></i></span></span>
          <span class="add-btn" @click="selectAuthPeople(authData[1])"><i class="el-icon-circle-plus-outline"></i></span>
        </div>
        <div class="row-1">
          <span class="type">工程师：</span>
          <span class="people" v-for="(item, idx) in authData[2].people" :key="item.id">{{item.name}}<span class="btn" @click="delAuth(authData[2], idx)"><i class="el-icon-close"></i></span></span>
          <span class="add-btn" @click="selectAuthPeople(authData[2])"><i class="el-icon-circle-plus-outline"></i></span>
        </div>
        <div class="row-1" style="background: #F3F3F3;">
          <span class="type">抄送人员：</span>
          <span class="people" v-for="(item, idx) in authData[3].people" :key="item.id">{{item.name}}<span class="btn" @click="delAuth(authData[3], idx)"><i class="el-icon-close"></i></span></span>
          <span class="add-btn" @click="selectAuthPeople(authData[3])"><i class="el-icon-circle-plus-outline"></i></span>
        </div>
        <div class="row-1">
          <span class="type">授章人员：</span>
          <span class="people" v-for="(item, idx) in authData[4].people" :key="item.id">{{item.name}}<span class="btn" @click="delAuth(authData[4], idx)"><i class="el-icon-close"></i></span></span>
          <span class="add-btn" @click="selectAuthPeople(authData[4])"><i class="el-icon-circle-plus-outline"></i></span>
        </div>
        <div class="row-1" style="background: #F3F3F3;">
          <span class="type">总监：</span>
          <span class="people" v-for="(item, idx) in authData[5].people" :key="item.id">{{item.name}}<span class="btn" @click="delAuth(authData[5], idx)"><i class="el-icon-close"></i></span></span>
          <span class="add-btn" @click="selectAuthPeople(authData[5])"><i class="el-icon-circle-plus-outline"></i></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from '@/utils/formUtil'

export default {
  data() {
    return {
      ccIds: [],
      ccNames: [],
      teamLeaderId: [],
      teamLeaderName: [],
      managerId: [],
      managerName: [],
      authData: [{
        name: '管理员',
        id: '1302813747899891713',
        people: []
      },{
        name: '观察者',
        id: '1302814022794575874',
        people: []
      },{
        name: '工程师',
        id: '1302813937092362242',
        people: []
      },{
        name: '抄送人员',
        id: '1306402116848410626',
        people: []
      },{
        name: '授章人员',
        id: '1302848230384566273',
        people: []
      },{
        name: '总监',
        id: '1310462391117508609',
        people: []
      }],
    }
  },
  async mounted() {
    this.authData.forEach(async (item) => {
      item.people = await this.$httpN.postQ('sys/user/listUserByRoleId', {roleId: item.id});
    })
  },
  mixins: [dingMixin],
  methods:{
    back() {
      this.$router.go(-1);
    },
    selectAuthPeople(row){
      this.complexPicker(100, [], row.people.map(item => item.emplId)).then(async (data)=>{
        let ids = data.map(item => item.emplId);
        if(! await this.$httpN.postQ('sys/user/setUserRole', {roleId: row.id, dingIds: ids.join(',')})) return;
        formUtil.submitSuccess('保存成功');
        row.people = await this.$httpN.postQ('sys/user/listUserByRoleId', {roleId: row.id});
      })
    },
    async delAuth(row, idx) {
      let copyArr = formUtil.deepCopy(row.people);
      copyArr.splice(idx, 1);
      let ids = copyArr.map(item => item.emplId);
      if(! await this.$httpN.postQ('sys/user/setUserRole', {roleId: row.id, dingIds: ids.join(',')})) return;
      formUtil.submitSuccess('保存成功');
      row.people = await this.$httpN.postQ('sys/user/listUserByRoleId', {roleId: row.id});
    }
  }
}
</script>

<style lang="scss" scoped>
  .setting-wrapper{
    background: #F5F5F7;
    min-height: 100vh;
    .setting-header{
      height: 64px;
      background: #00A0E9;
      font-size: 18px;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 64px;
      text-align: center;
      position: relative;
      .back{
        font-size: 16px;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 22px;
        position: absolute;
        left: 32px;
        top: 21px;
        cursor: pointer;
      }
    }
    .setting-data{
      padding: 32px;
      .data-wrapper{
        height: calc(100vh - 150px);
        background: #FFF;
        border-radius: 8px;
        box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 6px 16px -8px rgba(0, 0, 0, 0.08);
      }
      .data-header{
        line-height: 78px;
        font-size: 22px;
        font-weight: bold;
        color: #6E6E73;
        line-height: 78px;
        padding-left: 32px;
        border-bottom: 2px solid #F3F3F3;
      }
      .row-1{
        margin-top: 2px;
        background: #FFF;
        padding: 20px 0 20px 32px;
        .type{
          font-size: 16px;
          color: #262626;
          margin-right: 24px;
          font-weight: bold;
          line-height: 24px;
        }
        .people{
          display: inline-block;
          border-radius: 2px;
          border: 1px solid rgba(0, 0, 0, 0.15);
          font-size: 14px;
          color: rgba(0, 0, 0, 0.65);
          line-height: 24px;
          padding: 0 30px 0 8px;
          position: relative;
          border-radius: 2px;
          background: #FFF;
          margin-right: 5px;
          .btn{
            position: absolute;
            right:5px;
            top:6px;
            width: 13px;
            height: 13px;
            background: #D9D9D9;
            color: white;
            cursor: pointer;
            border-radius: 50%;
            line-height: 13px;
            i{
              font-size: 12px;
            }
          }
        }
        .add-btn{
          cursor: pointer;
          font-size: 24px;
          vertical-align: middle;
          color: #1890FF;
        }
      }
    }
  }
</style>